@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(255,255,255)
  overflow-x hidden
  &.default
    background url("../img/read-bg-1.png") no-repeat center center
    background-size cover
  &.second
    background rgb(227,236,209)
  &.third
    background rgb(201,217,233)
  &.evening
    background rgb(27,26,31)
    #read-wrapper
      color rgb(123,122,127)
      .head-wrapper
        .left-wrapper
          background url("../img/back-icon.png") no-repeat left center
          background-size computedNum(8) auto
          color rgb(123,122,127)
      .set-options-wrapper
        ul
          .right
            background rgb(52,52,52)
  #read-wrapper
    width 100%
    color #333333
    min-height 100%
    .head-wrapper
      padding computedNum(12) computedNum(20)
      font-size 0
      .left-wrapper
        width computedNum(235)
        height computedNum(30)
        line-height computedNum(32)
        padding-left computedNum(15)
        font-family SimHei
        font-size computedNum(16)
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
        background url("../img/dark-back-icon.png") no-repeat left center
        background-size computedNum(8) auto
        color #000000
      .home-wrapper
        vertical-align top
        height computedNum(30)
        width computedNum(40)
        margin-left computedNum(45)
        background url("../img/index-icon.png") no-repeat right center
        background-size computedNum(19) computedNum(18)
    .set-options-wrapper
      margin-top computedNum(5)
      ul
        font-size 0
        padding 0 computedNum(20)
        li
          vertical-align top
          width computedNum(30)
          height computedNum(22)
          line-height computedNum(23)
          border-radius computedNum(3)
        .bg
          margin-right computedNum(9)
          &:after
            border-radius computedNum(8)
          &.active
            border-1px-all(#333333)
        .default
          background url("../img/read-bg-1.png") no-repeat center center
          background-size cover
        .second
          background rgb(227,236,209)
        .third
          background rgb(201,217,233)
        .evening
          background url("../img/evening-icon.png") no-repeat center center
          background-size cover
          &.active
            border-1px-all(#ffffff)
        .right
          margin-left computedNum(12)
          background #dedcdc
          color #666666
          font-size computedNum(13)
        .present
          width computedNum(65)
          font-family SimHei
          margin-left computedNum(30)
    .read-content
      text-align justify
      padding 0 computedNum(20)
      margin-top computedNum(25)
      font-size 17px
    .bottom-wrapper
      padding 0 computedNum(20) computedNum(35) computedNum(20)
      font-size 0
      margin-top computedNum(54)
      .pre-chap-wrapper
        height computedNum(32)
        width computedNum(95)
        margin-right computedNum(12.5)
        vertical-align top
        border-1px-all(#333333)
        font-size 0
        font-family SimHei
        line-height computedNum(34)
        &.dark
          border-1px-all(rgb(123,122,127))
        .icon-wrapper
          width computedNum(14)
          vertical-align top
          margin-left computedNum(20)
          font-size computedNum(14)
        .change-chapter
          font-size computedNum(14)
      .catalog-btn
        height computedNum(32)
        width computedNum(120)
        line-height computedNum(34)
        margin-right computedNum(12.5)
        vertical-align top
        border-1px-all(#333333)
        &.dark
          border-1px-all(rgb(123,122,127))
        .icon-wrapper
          vertical-align top
          width computedNum(14)
          height computedNum(32)
          background url("../img/catalog-icon.png") no-repeat center center
          background-size computedNum(14) computedNum(11)
          margin 0 computedNum(8) 0 computedNum(35)
          &.dark
            background url("../img/dark-catalog-icon.png") no-repeat center center
            background-size computedNum(14) computedNum(11)
        span
          font-size computedNum(14)
      .next-chap-wrapper
        height computedNum(32)
        width computedNum(95)
        vertical-align top
        border-1px-all(#333333)
        font-size 0
        font-family SimHei
        line-height computedNum(34)
        &.dark
          border-1px-all(rgb(123,122,127))
        .icon-wrapper
          width computedNum(14)
          vertical-align top
          font-size computedNum(14)
        .change-chapter
          font-size computedNum(14)
          margin-left computedNum(20)
    .select-present-mask
      position fixed
      right 0
      bottom 0
      width 100%
      height 100%
      background rgba(0,0,0,0.2)
      z-index 10
      display none
      .select-present-top-mask
        right 0
        top 0
        width 100%
        height 100%
        z-index 10
      .select-present-wrapper
        right 0
        bottom 0
        width 100%
        height computedNum(308)
        background #ffffff
        z-index 11
        .present-list
          font-size 0
          li
            position relative
            display inline-block
            width computedNum(125)
            height computedNum(125)
            border-1px-all(rgb(236,236,236))
            .border-line
              position absolute
              top 0
              left 0
              width computedNum(122.3)
              height computedNum(122.3)
              border computedNum(1) solid #f86161
              display none
            &:after
              border-top none
              border-left none
            &:nth-child(3n)
              &:after
                border-right none
            .present-item
              font-size computedNum(12)
              color #999999
              .present-img
                width computedNum(69.8)
                height computedNum(57)
                margin computedNum(10) computedNum(27.6) computedNum(10) computedNum(27.6)
              .present-name
                margin-bottom computedNum(7)
        .present-btn-wrapper
          padding 0 computedNum(20)
          font-size 0
          .rest-coin
            width computedNum(158)
            height computedNum(79)
            line-height computedNum(65)
            font-size computedNum(13)
            color #333333
            vertical-align top
          .recharge-btn
            color #f86161
            font-size computedNum(14)
            height computedNum(79)
            line-height computedNum(64)
            padding 0 computedNum(10)
          .present-btn
            width computedNum(95)
            height computedNum(35)
            line-height computedNum(35)
            background #fe7676
            font-size computedNum(15)
            color #ffffff
            border-radius computedNum(18)
            margin-left computedNum(22)
            vertical-align top
            margin-top computedNum(13)
    .add-shelf-wrapper,.onsell-price-wrapper
      position fixed
      top 0
      left 0
      background rgba(0,0,0,0.5)
      width 100%
      height 100%
      z-index 9
      display none
      .add-shelf-content
        top computedNum(190)
        left computedNum(42.5)
        width computedNum(290)
        height computedNum(142)
        background #ffffff
        border-radius computedNum(2)
        .title
          font-family SimHei
          padding computedNum(23) 0 computedNum(16) computedNum(30)
          font-size computedNum(18)
        .desc
          padding-left computedNum(30)
          font-family SimHei
          font-size computedNum(15)
          color rgb(153,153,153)
          margin-bottom computedNum(20)
          .now-price
            color red
        .btn-group
          font-size 0
          span
            font-family SimHei
            font-size computedNum(16)
            padding computedNum(8) computedNum(20)
          .ensure
            margin-right computedNum(10)
            color rgb(246,58,58)
    .should-recharge-wrapper
      margin-top computedNum(80)
      .big-chap-name
        font-family SimHei
        font-size computedNum(28)
        margin-bottom computedNum(20)
      .unlock-tip
        font-family SimHei
        font-size computedNum(16)
        color #666666
        margin-bottom computedNum(25)
      .need-wrapper
        font-family SimHei
        font-size computedNum(15)
        margin-bottom computedNum(62)
        .price,.rest
          color rgb(255,0,0)
      .recharge-btn
        font-family SimHei
        width computedNum(320)
        height computedNum(43)
        line-height computedNum(43)
        background #ea8e3c
        color #ffffff
        font-size computedNum(17)
        margin-left computedNum(27.5)
        margin-bottom computedNum(15)
        border-radius computedNum(2)
        &.become-vip
          margin-bottom computedNum(90)
      .join-vip
        font-family SimHei
        font-size computedNum(15)
        color #a85002
      .get-gift-way
        width computedNum(270)
        margin 0 auto
        font-family SimHei
        font-size computedNum(11)
        color #666666
        margin-bottom computedNum(5)
      .vip-tip
        font-family SimHei
        font-size computedNum(20)
        margin-top computedNum(54)
        margin-bottom computedNum(25)
        color rgb(239,19,19)
      .limit-price
        font-family SimHei
        font-size computedNum(12)
        .now-price
          color red
          font-size computedNum(18)
        .orgin-price
          color red
    .sign-success-wrapper
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,0.6)
      z-index 9
      display none
      .sign-success
        width computedNum(375)
        height computedNum(450)
        background url("../img/success-bg.png") no-repeat center center
        background-size computedNum(375) auto
        margin-top computedNum(130)
        .success-detail
          width computedNum(175)
          margin-left computedNum(100)
          padding-top computedNum(190)
          color #666666
          .success-title
            font-size computedNum(20)
            font-family SimHei
          .success-award
            font-size computedNum(14)
            font-family SimHei
            margin-top computedNum(10)
    .focus-wx-wrapper
      display none
      .qrcode-wrapper
        width computedNum(283)
        height computedNum(273)
        margin computedNum(100) computedNum(46) 0 computedNum(46)
        background url("../img/wx-code.png") no-repeat center center
        background-size computedNum(283) auto
        .code-img-wrapper
          width computedNum(90)
          height computedNum(90)
          bottom computedNum(23)
          left computedNum(27)
      .focus-btn
        width computedNum(200)
        height computedNum(62)
        background url("../img/code-btn.png") no-repeat center center
        background-size computedNum(200) auto
        margin computedNum(20) computedNum(87.5) 0 computedNum(87.5)
      .close-focus
        width computedNum(27)
        height computedNum(27)
        background url("../img/del.png") no-repeat center center
        background-size computedNum(27) auto
        margin computedNum(20) computedNum(174) 0 computedNum(174)
    .first-charge-wrapper
      display none
      .first-charge-img
        width computedNum(333)
        height computedNum(254)
        background url("../img/recharge.png") no-repeat center center
        background-size computedNum(333) auto
        margin computedNum(100) computedNum(21) 0 computedNum(21)
        .close-first-charge
          top 0
          right computedNum(20)
          width computedNum(27)
          height computedNum(27)
          background url("../img/del.png") no-repeat center center
          background-size computedNum(27) auto
      .get-first-charge
        width computedNum(120)
        height computedNum(40)
        background url("../img/btn.png") no-repeat center center
        background-size computedNum(120) auto
        margin computedNum(30) computedNum(127.5) 0 computedNum(127.5)
    .charge-30-wrapper
      display none
      .charge-30-img
        width computedNum(293)
        height computedNum(341)
        background url("../img/recharge-30.png") no-repeat center center
        background-size computedNum(293) auto
        margin computedNum(100) computedNum(41) 0 computedNum(41)
        .close-charge-30
          top computedNum(-10)
          right computedNum(0)
          width computedNum(27)
          height computedNum(27)
          background url("../img/del.png") no-repeat center center
          background-size computedNum(27) auto
        .charge-30-btn
          width computedNum(230)
          height computedNum(52)
          left computedNum(35)
          bottom computedNum(8)
    .vip-wrapper
      display none
      .vip-img
        width computedNum(350)
        height computedNum(430)
        background url("../img/vip.png") no-repeat center center
        background-size computedNum(350) auto
        margin computedNum(100) computedNum(12.5) 0 computedNum(12.5)
        .close-vip-btn
          top computedNum(-20)
          right computedNum(10)
          width computedNum(27)
          height computedNum(27)
          background url("../img/del.png") no-repeat center center
          background-size computedNum(27) auto
        .month-btn
          bottom computedNum(40)
          left computedNum(80)
          width computedNum(100)
          height computedNum(35)
          background url("../img/month-btn.png") no-repeat center center
          background-size computedNum(100) auto
        .year-btn
          bottom computedNum(40)
          right computedNum(52)
          width computedNum(100)
          height computedNum(35)
          background url("../img/year-btn.png") no-repeat center center
          background-size computedNum(100) auto